@import '../shared/helper';
@import './chart';

// 各图表模块
.home {
  @include flex-column;
  @include chart;
  flex: 1;
  background-color: #010310;
  color: #fff;
  font-size: px(16);

  > header {
    @include horizon-center-2420;
    height: px(99); // 设置该图片的像素高度 为参数即可 // width 默认为 100%
    background-size: cover; // 按原比例 缩放
  }

  > footer {
    @include flex-center;
    height: px(68);
    margin: px(20) 0 0;
    border-top: 1px solid #0d2d59;
    background: #0c0d2b; }

  > main {
    @include horizon-center-2420;
    padding-top: px(30);
    flex: 1;
    display: grid;
    grid-template:
      'box1 box2 box4 box5' 755fr /* 行高 */
      'box3 box3 box4 box5' 363fr /* 行高 */ / 366fr 361fr 811fr 747fr; /* 列宽 */
    grid-column-gap: px(28);
    grid-row-gap: px(28);

    // 图表模块 统一边框
    .bordered {
      background-color: rgba(12, 17, 57, 0.8);
      border: 1px solid #0764bc;
      border-radius: 4px;
      position: relative;
      box-shadow: 0 0 2px 0 #0f3361, inset 0 0 2px 0 #0f3361;

      &::before {
        content: '';
        pointer-events: none; // 穿透鼠标事件
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 4px;
        box-shadow: 17px 0 0 -16px #0f3361,
        -17px 0 0 -16px #0f3361,
        0 17px 0 -16px #0f3361,
        0 -17px 0 -16px #0f3361,
        9px 0 0 -8px #0d4483,
        -9px 0 0 -8px #0d4483,
        0 9px 0 -8px #0d4483,
        0 -9px 0 -8px #0d4483,;

      }

    }

    $box-styles: (
      1: transparent,
      2: transparent,
      3: transparent,
      4: transparent,
      5: transparent,
    );
    // section1~5
    @each $key, $color in $box-styles {
      > .section#{$key} {
        @include flex-column-between;
        grid-area: box#{$key};
        background-color: $color;
      }
    }

    > .section5 {
      @include flex-column-between;

      > .row1 {
        height: px(317);
      }

      > .row2 {
        height: px(317);
      }

      > .row3 {
        height: px(455);
      }
    }
  }

  .label-text {
    //transform: scale(0.8);
    //transform-origin: center center;
    white-space: nowrap;
  }
}
